<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tg</title>
		<!-- <link rel="stylesheet" href="../../css/tougao.css" /> -->
		<style>
			#overall-tg{
				background-color: rgba(255, 255, 255, 0.5);
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0;
				top: 0;
				display: none;
				z-index: 20;
				/* 模糊下层 */
				backdrop-filter:blur(1px);
				/* 设置元素无法点击 */
				pointer-events:all;
			}
			
			#tougao{
				box-shadow: 0 0 20px rgba(0,0,0,0.4);
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto auto;
				z-index: 21;
				border-radius: 15px;
				width: 800px;
				height: 700px;
				background-color: beige;
				padding-top: 70px;
			}
			.close{
				background-color:rgba(255, 255, 255, 0.6);
				position: absolute; /* 修改为绝对定位以相对于父元素定位 */
				top: 10px; /* 调整按钮位置到右上角 */
				right: 10px; /* 将按钮移至右侧，距离右边10px */
				width: 350px;
				height: 110px;
				cursor: pointer;
				z-index: 21;
			}
			#gogotg{
				color: cadetblue;
				position: absolute;
				font-size: 80px;
				font-weight: 300;
				top: 15px;
				left: 25px;
			}
			.userpow img{
				background-color: white;
				margin-top:-50px ;
				margin-left:40px ;
				  width: 250px; 
				  height: 250px; 
				  border-radius: 50%; 
			}
			#tgform{
				
			}
			#tgform input{
				margin-bottom: 10px;
				width: 350px;
				height: 45px;
			}
			.tabletg{
			}
			.td-1{
				background-color:rgba(255, 255, 255, 0.6);
				width: 330px;
				height: 100px;
			}
			.td-2{
				width: 500px;
				background-color: rgba(255, 255, 255, 0.8);
			}
			#getform{
				color: white;
				cursor: pointer;
				margin-left: 390px;
				margin-right: 50px;
				padding-left: 10px;
				border-radius: 12px;
				background-color: #0088cc;
			}
			textarea[name="comment"] {
			  resize: none; /* 禁止调整大小 */
			  width: 350px; 
			  height: 200px; 
			}
		</style>
	</head>
	<body>
		<button onclick="tougaoshow()">demo</button>
		<div id="overall-tg">
			<div id="tougao">
				<div  class="close" onclick="sclosetg()">
					<img class="imgli" src="imgs/x.png" alt="" />
				</div>
				<div>
					<span id="gogotg">我要投稿</span>
				</div>
				<div class="userpow">
					<img src="../../img/tx.png" alt="" />
				</div>
				
				
				<table class="tabletg">
					<td class="td-1">
						新竹高于旧竹枝，全凭老干为扶持。明年再有新生者，十万龙孙绕凤池。
					</td>
					
					<td class="td-2">
						<form id="tgform" name="tgform" action="">
						<input type="text" name="" value ="username:Aisu" disabled>
						<input type="email" placeholder="您的邮箱"/>
						<input type="tel" placeholder="您的手机号码"/>
						<input type="date" />
						<textarea name="comment" rows="10" cols="30">
						</textarea>
						<div id="getform" onclick="tougao(),tgform.reset()">投稿</div>
						</form>
					</td>
				</table>
				
			</div>
		</div>
		
		<script>
			function tougaoshow(){
				overtg.style.display="block"
				if(!success){
					alert("哥们别急，先登录！")
				}else{
					/* 打开页面 */
				}
			}
			/* 关闭遮盖 */
			function sclosetg(){
				overtg.style.display="none";
			}
			var overtg = document.getElementById('overall-tg');
			
			function tougao(){
				alert("投稿成功！")
				overtg.style.display="none"
			}
		</script>
	</body>
</html>